<template>
  <div class="healthInfo pd-20">
    <el-input v-model="param.orderNumber"
              placeholder="请输入订单编号"
              class="w-200"
              clearable
              @clear="handle(1,0)"></el-input>
    <el-input v-model="param.name"
              placeholder="请输入随访包名称"
              class="w-200"
              clearable
              @clear="handle(1,0)"></el-input>
    <el-input v-model="param.hospitalName"
              placeholder="请输入医院名称"
              class="w-200"
              clearable
              @clear="handle(1,0)"></el-input>
    <!-- <el-input v-model="param.hospitalName" placeholder="购买时间" class="input_1" clearable></el-input> -->
    <el-date-picker v-model="value1"
                    type="daterange"
                    value-format='yyyy-MM-dd'
                    range-separator="至"
                    start-placeholder="购买开始日期"
                    end-placeholder="购买结束日期">
    </el-date-picker>
    <el-select v-model="param.payStatus"
               placeholder="全部支付状态"
               class="w-200"
               clearable
               @change="handle(1,0)"
               @clear="handle(1,0)">
      <el-option label="未支付"
                 :value="0"></el-option>
      <el-option label="已支付"
                 :value="1"></el-option>
    </el-select>

    <el-button @click="handle(1,0)"
               type="primary">查 询</el-button>
    <el-button @click="handle(2,0)"
               type="primary"
               style="width:100px">批量支付</el-button>
    <el-button @click="handle(3,0)"
               type="primary">导 出</el-button>
    <el-table :data="tableData"
              border
              class="mt-20"
              @selection-change="handleSelectionChange"
              style="width: 100%">
      <el-table-column align="center"
                       type="selection"></el-table-column>
      <el-table-column align="center"
                       prop="orderNumber"
                       label="订单编号"
                       width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.order">{{scope.row.order.orderNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="name"
                       label="随访包名称"></el-table-column>
      <el-table-column align="center"
                       prop="money"
                       label="订单价格">
        <template slot-scope="scope">
          <span v-if="scope.row.order">{{scope.row.order.money}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="userName"
                       label="购买人">
        <template slot-scope="scope">
          <span v-if="scope.row.user">{{scope.row.user.nickName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="physicalExaminationName"
                       label="所属医院">
        <template slot-scope="scope">
          <span v-if="scope.row.hospital">{{scope.row.hospital.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="physicalExaminationName"
                       label="带队专家">
        <template slot-scope="scope">
          <span v-if="scope.row.leader">{{scope.row.leader.nickName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="购买时间">
        <template slot-scope="scope">
          <span>{{commonFunction.timestampFormat(new Date(scope.row.createTime), 'yyyy-MM-dd hh:mm')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="orderStatus"
                       label="订单状态">
        <template slot-scope="scope">
          <span :style="{color:scope.row.payStatus == 0 ?'red':''}">{{scope.row.payStatus == 0?'未支付':'已支付'}}</span>
        </template>
      </el-table-column>

      <el-table-column width="200"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="info"
                     @click="handle(4,scope.row.id)">详 情</el-button>
          <el-button type="primary"
                     plain
                     @click="handle(5,scope.row)">{{ scope.row.payStatus === 0 ? '确认支付' : '查看支付凭证'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <orderdialog v-if="showdialog"
                 :dialogData='dialogData'
                 @closedialog='showdialog=false;_getList' />
    <el-dialog title="订单支付确认"
               :visible.sync="centerDialogVisible"
               width="30%"
               v-if="centerDialogVisible"
               @close='centerDialogVisible = false'
               center>
      <el-form :model="form">
        <el-form-item label="支付凭证：">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="form.certUrl"
                 :src="form.certUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注说明：">
          <el-input v-model="form.remark"
                    type="textarea"
                    maxlength="200"
                    :autosize="{ minRows: 4, maxRows: 4}"
                    show-word-limit
                    autocomplete="off"
                    style="width:70%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="success"
                   @click="addPayRecord"
                   style="background-color:#33c99e;color:#FFF">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import orderdialog from '../followUpOrder/orderDialog'
  import { mapGetters } from 'vuex'
  import { Loading } from 'element-ui'

  export default {
    name: "finsphysicalOrder",//体检订单
    data () {
      return {
        value1: [],
        form: {
          certUrl: null,
          jsonData: [],
          remark: ''
        },
        imageUploadUrl: this.api.appUpgradeUpload.url,
        centerDialogVisible: false,
        param: {},
        tableData: [{ title: '张三' }],
        pageTotal: 0,
        typeItems: [{
          value: 1,
          name: '三级甲等'
        }, {
          value: 0,
          name: '三级乙等'
        }],
        showdialog: false,
        dialogData: {
          show: true,
          info: {}
        },
        chooseHowmuch: 0,
        multipleSelection: []
      }
    },
    mounted () {
      this._getList()
    },
    methods: {
      handleSelectionChange (row) {
        this.multipleSelection = row
      },
      addPayRecord () {
        if (this.chooseHowmuch) {
          this.form.jsonData.push(this.chooseHowmuch)
        } else {
          this.multipleSelection.forEach(ele => {
            this.form.jsonData.push(ele.id)
          })
        }
        this.post(this.api.cooperationHospital.hospitalPkgManageOrderaddPayRecord, this.form).then(res => {
          if (res.data.code === '200') {
            this._getList()
            this.form = {
              certUrl: null,
              jsonData: [],
              remark: ''
            }
            this.centerDialogVisible = false
            this.$message.success('操作成功')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      closeDialog () {

      },
      exportExcel () {
        // let options = {
        //   lock: true,
        //   text: '正在导出...',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(0, 0, 0, 0.7)'
        // }
        // Loading.service(options);
        this.$axios({
          url: this.api.cooperationHospital.expertFinanceOrderList,
          method: 'post',
          responseType: 'blob', // 服务器返回的数据类型
          params: this.param,
          data: this.param
        }).then((res) => {
          // Loading.close()
          const content = res.data
          const blob = new Blob([content]) // 构造一个blob对象来处理数据
          const fileName = '随访包订单_财务.xls' // 导出文件名
          if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
            const link = document.createElement('a') // 创建a标签
            link.download = fileName // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href) // 释放url
            document.body.removeChild(link) // 释放标签
          } else { // 其他浏览器
            navigator.msSaveBlob(blob, fileName)
          }
        }).catch((error) => {
          // Loading.close()
        })
      },

      handle (index, row) {
        switch (index) {
          case 1:
            this.page.pageIndex=0
            if (this.value1 && this.value1.length) {
              this.param.startTime = this.value1[0]
              this.param.endTime = this.value1[1]
            } else {
              this.param.startTime = null
              this.param.endTime = null
            }
            this._getList()
            break
          case 2:
            this.chooseHowmuch = 0
            let op = []
            op = this.multipleSelection.filter(res => res.payStatus == 1)
            if (op.length > 0) {
              this.$message.warning('选择列表中包含已支付订单')
            } else if (this.multipleSelection.length == 0) {
              this.$message.warning('请勾选选择列表')
            } else {
              this.centerDialogVisible = true
            }
            break;
          case 3:
            this.exportExcel()
            break;
          case 4:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: { id: row }
            }
            break
          case 5:
            if (row.payStatus == 1) {
              this.$alert(`<img src='${row.payRecord.certUrl}' style='height:100%;width:100%'><p>备注说明：${row.payRecord.remark}</p>`, '支付凭证', {
                dangerouslyUseHTMLString: true
              }).catch(err => {

              })
            } else {
              this.chooseHowmuch = row.id
              this.centerDialogVisible = true
            }
            break;
        }

      },
      _getList () {
        this.param.pageIndex = this.page.pageIndex
        this.param.pageSize = this.page.pageSize

        this.post(this.api.cooperationHospital.pkgManageOrdergetFinanceOrderList, this.param).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object
            this.pageTotal = res.data.totalNum
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      handleAvatarSuccess (res) {
        this.form.certUrl = res.object[0];
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      orderdialog
    }
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .information {
    margin: 10px 0px 0px 0px;
  }

  .btn_1 {
    margin-left: 10px;
  }

  .el-select {
    width: 90%;
  }

  .editorForm {
    height: 750px;
  }

  .editor {
    position: fixed;
    margin-left: -70px;
    width: 70%;
    height: 700px;
    float: left;
  }

  .info {
    height: 750px;
    width: 30%;
    position: absolute;
    top: 78px;
  }

  .info .el-input {
    width: 90%;
  }

  .avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px dashed #606266;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .formTitle {
    display: inline-block;
    line-height: 24px;
    font-size: 18px;
    color: #303133;
  }

  .return {
    float: right;
  }
</style>
